<template>
	<view class="profit-wrap page-bg">
		<view class="">
		<view class="page-head">
			<image class="page-header__bg" src="../../static/item_24.png" mode=""></image>
			<view class="bean-desc">当前可用{{common.bean}}</view>
			<view class="bean-num">{{userInfo.integral || 0}}</view>
		</view>
		
		<scroll-view class="scroll-menu" scroll-x="true">
			<view v-for="item in navs" :key='item.id' :class="currentNavId===item.id?'menu-item menu-item-active':'menu-item'"
			 @click="serCurrentNavId(item.id,'nav')" style="width: 50%;">
				{{item.title}}
				<text class="after-line"></text>
			</view>
		</scroll-view>
		</view>
		<view v-if="items.length <=0" class="none-wrap"  >
			<none :img='icon_none' :text="tips"></none>
		</view>
		<view e-else class="mine-list">
			<view class="mine-item" v-for="item in items" :key='item.id'>
				<view class="mine-item__info">
					<view class="mine-item__title">{{item.commTypeView}}</view>
					<view class="mine-item__time">{{item.creationTime | formatTime}}</view>
				</view>
				<view v-if="currentNavId===0" class="mine-item__profit orange">+{{item.commission}}</view>
				<view v-if="currentNavId===1" class="mine-item__profit base">-{{item.commission}}</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import icon_none from '../../static/common/icon_none_02.png'
	import none from '../../components/none.vue'
	import common from '../../utils/common.js'
	import { api } from '../../utils/api.js'
	export default {
		data() {
			return{
				icon_none,
				pageIndex: 1,
				pageSize: 10,
				totalCount: 0,
				items: [],
				userInfo: {},
				navs: [{
						id: 0,
						title: '获取明细'
					},
					{
						id: 1,
						title: '使用明细'
					}
				],
				currentNavId: 0, // 控制收益记录
				tips: '',
				common
			}
		},
		onLoad() {
			this.tips = '还没有任何明细记录哦!'
			this.pageSize = common.pageSize
			this.userInfo = common.getUserInfo()
			this.getItems()
		},
		methods:{
			getItems() {
				let {currentNavId, pageIndex, pageSize} = this.$data
				api.integralRecord({type: currentNavId, pageIndex, pageSize},(res) => {
					 this.totalCount = res.totalCount
					 if(this.pageSize > res.totalCount) { this.text = '已经没有更多了~' }
					 this.items = [...this.items, ...res.items]
				}) 
			},
			serCurrentNavId(id) {
				this.currentNavId = id
				this.pageIndex = 1
				this.items = []
				this.getItems()
			},
		},
		onReachBottom() {
			if(this.pageIndex * this.pageSize >= this.totalCount) {
				this.text = '已经没有更多了~'
			}else{
				this.pageIndex ++
				this.getItems()
			}
		},
		components:{
			none
		}
	}
</script>

<style scoped lang="less">
	@import url('../../app.less');
	.profit-wrap{
		.flex-base;
		flex-direction: column;
		justify-content: flex-start;
	}
	
	.page-head{
		width: 100%;
		position: relative;
		.content-30;
		.f24;
		color: @f;
		padding-top: 90rpx;
		padding-bottom: 110rpx;
		color: @f;
		text-align: center;
		.bean-desc{
			.f24;
			position: relative;
			margin-bottom: 10rpx;
		}
		.bean-num{
			font-size: 80rpx;
			.fw;
			position: relative;
		}
	}
	.mine-list{
		margin-top: 20rpx;
	}
	.page-header__bg{
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}

	.scroll-menu{
		background-color: @f;
		width: 690rpx;
		margin: 0 auto;
		.br;
		margin-top: 45rpx;
		.menu-item{
			width: 50%;
		}
	}
	.none-wrap{
		position: relative;
		.none{
			position: unset;
		}
	}
	.mine-list{
		padding: 0 30rpx;
		box-sizing: border-box;
		width: 100%;
		.mine-item{
			background-color: @f;
			.br;
			.content-20;
			margin-bottom: 20rpx;
			.flex-base;
			align-items: flex-start;
		}
		.mine-item__info{
			padding-right: 20rpx;
			box-sizing: border-box;
			flex-grow: 2;
		}
		.mine-item__title{
			.f30;
		}
		.mine-item__time{
			.f24;
			color: @font-dark-color;
			margin-top: 10rpx;
		}
		.mine-item__profit{
			.f32;
			.fw;
			width: 150rpx;
			.text-overflow;
			text-align: right;
		}
	}
	.none-wrap{
		   position: relative;
		   flex-grow: 2;
		   .flex-base;
		   justify-content: center;
		   
		   .none {
		   	position: unset;
		   }
	}
</style>
